<template>
  <div class="subscriptionSearchWrap">
    <a-row>
      <a-col :span="5" class="subscriptionSearchLeft">
        <h2>{{ $t('subscriptionQuery') }}</h2>
      </a-col>
      <a-col :span="19" class="subscriptionSearchRight">
        <a-tooltip
          v-if="$hasPermission(managePerms.subscription.view)"
          :title="$t('searchOrder')">
          <a-button
            class="newBtn"
            @click="handleSearch">
            <i class="iconfont icon-shaixuan"></i>
          </a-button>
        </a-tooltip>
        <a-tooltip :title="$t('reset')">
          <a-button class="newBtn" @click="clearCondition">
            <i class="iconfont icon-qingkong"></i>
          </a-button>
        </a-tooltip>
        <a-tooltip
          v-if="$hasPermission(managePerms.subscription.export)"
          :title="$t('export')">
          <a-button
            class="newBtn"
            @click="exportSubs">
            <a-spin v-if="exporting">
              <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
            </a-spin>
            <i class="iconfont icon-xiazai" v-else></i>
          </a-button>
        </a-tooltip>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import subscriptionQueryApi from '@/api/modules/system/subscriptionQuery'
import { downloadBlobFile } from '@/utils/functions'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
export default {
  components: {
    CommonSelect,
    AuthButton
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.subscriptionMaintain.queryParams
    })
  },
  data () {
    return {
      managePerms,
      exporting: false
    }
  },
  methods: {
    handleSearch () {
      this.$emit('clickbtn', { type: 'openSearchComp' })
    },
    clearCondition () {
      this.$store.commit('resetSubscriptionMaintainQueryParams')
      this.$emit('clickbtn', { type: 'searchData' })
    },
    // 导出订阅列表
    exportSubs () {
      this.exporting = true
      subscriptionQueryApi.exportServiceVehicle(this.queryParams).then(res => {
        downloadBlobFile(res, this.$t('subsList') + '.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    }
  }
}
</script>
<style lang="less">
.subscriptionSearchWrap {
  padding-bottom: 5px;

  .subscriptionSearchLeft {
    >h2 {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .subscriptionSearchRight {
    display: flex;
    justify-content: flex-end;
    button.newBtn {
      min-width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fafafa;
      padding: 0;
      font-size: 24px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
    }
    .newBtn:last-of-type{
      margin-right: 20px;
    }
  }

}
</style>
<style lang="less">
.subscriptionSearchWrap {
  .ant-btn {
    .iconfont {
      margin-right: 0;
    }
  }

  .disabledAuthButtonWrap {
    margin-right: 0;
    .ant-btn {
      min-width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fafafa;
      padding: 0;
      font-size: 24px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
